<template>
    <div>
        <!-- <h1>收费统计</h1> -->
        <div class="container ">
            <h2>老师课时消费统计</h2>
            <el-divider></el-divider>
            <el-form class="form-demo">
                <el-form-item label="统计时段">
                    <el-radio-group v-model="form.time">
                        <el-radio value="month">月</el-radio>
                        <el-radio value="season">季</el-radio>
                        <el-radio value="year">年</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="查找年份" v-if="form.time != 'year'">
                    <el-select v-model="form.year" placeholder="选择年份" placement="top-start">
                        <el-option v-for="year in yearRange" :key="year" :label="year" :value="year" />
                    </el-select>
                </el-form-item>
                <el-row v-else>
                    <el-col :span="12">
                        <el-form-item label="开始年份">
                            <el-select v-model="form.startYear" placeholder="选择年份">
                                <el-option v-for="year in yearRange" :key="year" :label="year" :value="year">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="结束年份">
                            <el-select v-model="form.endYear" placeholder="选择年份">
                                <el-option v-for="year in yearRange" :key="year" :label="year" :value="year"
                                    :disabled="year < form.startYear">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="bindConfirm">统计</el-button>
                    <el-button @click="cancel">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import useYear from '@/hooks/useYear'//
const form = reactive({
    time: 'month',
    year: '2021',
    startYear: '2021',
    endYear: '2024'
})
//动态生成年份
const { yearRange } = useYear()
</script >
<style lang="less" scoped>
.form-demo {
    width: 70%;
    padding-left: 10%;
}

.form-demo .el-select {
    width: 200px;
}
</style>